<template>
  <div class="auto">
    <div class="head">
      <img src="../../../static/loginlogo.png" alt="图片加载未完成"
      style="float:left;width: 100px; height: 80px; margin: 10px 20px 20px 20px;"/>
      <div style="float:left;width:auto;height:130px;padding-top:10px;">
        <h3 style="font-size: 22px;">欢迎使用陕西燃气管理系统</h3>
        <h5 style="font-size: 15px;">Welcome to ShanXi GAS Manage System</h5>
      </div>

      <h5 style="float:right;margin-top:70px;margin-right:80px;">

        <span class="glyphicon glyphicon-calendar"></span>
        {{ date }}&nbsp;&nbsp;

        <span class="glyphicon glyphicon-copyright-mark"></span>
        系统版本：V1.0.0&nbsp;&nbsp;

        <span class="glyphicon glyphicon-th-large"></span>
        蓝色主题&nbsp;&nbsp;
        <a href="#" style="color:#fff;text-decoration:none;" @click.stop.prevent="modify=true">
          <span class="glyphicon glyphicon-cog"></span>
          修改密码
        </a>
      </h5>
    </div>
    <div class="auto">
      <!-- 白线div -->
      <div class="whiteline">
      </div>
        <select-menu :model="functions.functions"></select-menu>
    </div>
    <modal v-ref:modal :show.sync="modify" :backdrop="false" class="auto">
      <header slot="modal-header" class="modal-header">
        <h4 class="modal-title">修改密码</h4>
      </header>
      <article slot="modal-body" class="modal-body modifystyle">
        <validator name="v">

          <div class="has-feedback"
          :class="{'has-warning':$v.password.required,'has-error':$v.password.equalValid && !($v.password.required),
          'has-success': !$v.password.required && !($v.password.equalValid && !($v.password.required))}">
            <label for="password" class="control-label">原始密码:&nbsp;&nbsp;</label>
            <input type="password" v-model="deliver.password" class="form-control" id="password" v-validate:password="{ required: true, equalValid: functions.password }">
            <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.password.required && !($v.password.equalValid && !($v.password.required))"></span>
            <!-- <span class="glyphicon form-control-feedback"
            :class="{'glyphicon-warning-sign':$v.password.required,'glyphicon-remove'$v.password.equalValid && !($v.password.required):,
            'glyphicon-ok':!$v.password.required && !($v.password.equalValid && !($v.password.required))}"></span> -->
            <span v-if="$v.password.required">不能为空</span>
            <span v-if="$v.password.equalValid && !($v.password.required)">原始密码错误 !!</span>
          </div>

          <div class="has-feedback"
          :class="{'has-warning':$v.newpassword.required, 'has-success': !$v.newpassword.required}">
            <label for="newpassword" class="control-label">新的密码:&nbsp;&nbsp;</label>
            <input type="password" v-model="deliver.newpassword" class="form-control" id="newpassword" v-validate:newpassword='{ required: true }'>
            <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.newpassword.required"></span>
            <!-- <span class="glyphicon form-control-feedback"
            :class="{'glyphicon-warning-sign':$v.newpassword.required,'glyphicon-ok':!$v.newpassword.required }"></span> -->
            <span v-if="$v.newpassword.required">不能为空</span>
          </div>

          <div class="has-feedback"
          :class="{'has-warning':$v.affirmpassword.required,'has-error':$v.affirmpassword.equalValid && !($v.affirmpassword.required),
          'has-success': !$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))}">
            <label for="affirmpassword" class="control-label">确认密码:&nbsp;&nbsp;</label>
            <input type="password" v-model="deliver.affirmpassword" class="form-control" id="affirmpassword" v-validate:affirmpassword="{ required: true, equalValid: deliver.newpassword }">
            <span class="glyphicon glyphicon-ok form-control-feedback" v-if="!$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))"></span>
            <!-- <span class="glyphicon form-control-feedback"
            :class="{'glyphicon-warning-sign':$v.affirmpassword.required,'glyphicon-remove'$v.affirmpassword.equalValid && !($v.affirmpassword.required):,
            'glyphicon-ok':!$v.affirmpassword.required && !($v.affirmpassword.equalValid && !($v.affirmpassword.required))}"></span> -->
            <span v-if="$v.affirmpassword.required">不能为空</span>
            <span v-if="$v.affirmpassword.equalValid && !($v.affirmpassword.required)">两次密码不一致 !!</span>
          </div>

        </validator>
      </article>
      <footer slot="modal-footer" class="footerbtn">
        <button  type="button" class="btn btn-success" @click='confirm' :disabled="!$v.valid">确认</button>
        <button  type="button" class="btn btn-default" @click='close'>取消</button>
      </footer>
    <modal>
      <!-- modifyPassword() -->
  </div>
</template>

<script>
import co from 'co'
import * as Util from '../Util'

let saveGen = function * (self) {
  self.deliver.ename = self.functions.ename
  // let res = yield self.$post('rs/user/entity', {data: self.deliver})
  // let res = yield self.$post('rs/db/modifypassword', {data: self.deliver})
  let res = yield self.$post('rs/db/modifypwd', {data: self.deliver})
  if (res.status === 200 || res.status === 204) {
    self.modify = false
    self.deliver.password = ''
    self.deliver.newpassword = ''
    self.deliver.affirmpassword = ''
  }
}

export default {
  title: '菜单选择',
  props: ['functions'],
  data () {
    return {
      modify: false,
      deliver: {
        password: '',
        newpassword: '',
        affirmpassword: ''
      }
    }
  },
  computed: {
    date () {
      return Util.getNowDate()
    }
  },
  methods: {
    open (row) {
      if (row.link) {
        // this.$goto(row.link, {userid: this.functions, source: {isRead: 'modify'}}, 'home-page')
        this.$goto(row.link, {f: this.functions}, 'home-page')
      }
    },
    // 修改密码操作
    close () {
      this.modify = false
    },
    confirm () {
      let gen = saveGen(this)
      co(gen)
    }
  },
  events: {
    'select-changed': function (data) {
      // 事件回调内的 `this` 自动绑定到注册它的实例上
      this.open(data.val)
    }
  }
}
</script>
<style>
/* 头部样式，大部分使用放在标签内 */
  .head {
    color: #fff;
    height: 110px;
    width: 100%;
  }
  /* 菜单头部与内容区域的中间的白色线 */
  .whiteline {
    height: 1px;
    background: #fff;
    margin: 0px 30px;
  }
  /*修改密码body界面样式*/
  .modifystyle {
    background: #FCFEEE;
  }
   .modifystyle div{
     height: auto;
     margin-bottom: 15px;
     /*text-align: center;*/
     margin-left: 20%;
   }
   /*bootstrap字体图标要手动调整，所以使用字体图标的span必须紧跟在input后面，负责会错位*/
   .modifystyle div input + span{
     top: 0!important;
     right: 32%;
   }
   .modifystyle span{
     color: red;
   }
   /*修改密码底部按钮部分样式*/
   .footerbtn {
     text-align: center;
     padding: 15px;
   }
   .footerbtn button {
     width: 100px;
     margin-left: 20px;
   }
</style>
